import { Form, Input, message, Modal } from 'antd';
import FormItem from 'antd/lib/form/FormItem';
import React from 'react';
import { FormInstance } from 'antd/lib/form';
import { updateAnalyseCategory, updateAnalysePage } from 'src/services/AnalyseManage';

interface IProps {
	modalVisible: boolean;
	toggleVisible: ( isVisible: boolean, isLoadData?: boolean ) =>  void;
	currentModalData: any;
}

//	报表重命名
const RenameModal = ( props: IProps ) => {
	const formRef = React.createRef<FormInstance>();

	const modalConfig = {
		labelCol: { span: 5 },
		wrapperCol: { span: 15 }
	};

	const onModalCancel = () => {
		props.toggleVisible( false );
	};

	const onModalOk = () => {
		formRef.current
			.validateFields()
			.then( async ( values: any ) => {
				console.log( values );
				let data = {
					id: props.currentModalData.id,
					name: values.name,
					des: values.des,
				};
				let response;
				if ( props.currentModalData.isFile ) {
					response = await updateAnalyseCategory( data );
				} else {
					response = await updateAnalysePage( data );
				}

				if ( response.data && response.data.success ) {
					message.success( '修改成功' );
					props.toggleVisible( false, true );
				}

			} )
			.catch( ( errorInfo ) => {
				console.log( errorInfo );
			} );


	};

	return (
		<Modal
			destroyOnClose
			title="重命名"
			visible={ props.modalVisible }
			onCancel={ onModalCancel }
			onOk={ onModalOk }
			width={ '60%' }
			okText='确定'
			cancelText='取消'
		>
			<Form
				ref={ formRef }
				layout="horizontal"
				initialValues={ props.currentModalData }
			>
				<FormItem { ...modalConfig } label="名称" name="name" rules={ [ { required: true, message: '名称不能为空' } ] }>
					<Input placeholder="名称不能为空"/>
				</FormItem>
				<FormItem { ...modalConfig } label="描述" name="des">
					<Input placeholder="请输入描述"/>
				</FormItem>
			</Form>
		</Modal>
	);
};

export default React.memo( RenameModal );
